<!-- 局部过滤器的使用方法 -->
<template>
  <div class="fillterFunc">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <h1>时间展示</h1>
    <!-- 计算属性实现 -->
    <h2>当前时间：{{ fmtTime }}</h2>
    <!-- method实现 -->
    <h3>当前时间：{{ getfmtTime() }}</h3>
    <!-- 过滤器实现 timeStr被作为参数传递到参数中去 -->
    <h4>当前时间：{{ timeStr | timeFormatter }}</h4>
    <!-- 过滤器实现传参 -->
    <h4>当前时间：{{ timeStr | timeFormatter("YYYY年MM月DD hh:mm:ss") }}</h4>
    <!-- 多过滤器串联 -->
    <h4>
      当前时间：{{ timeStr | timeFormatter("YYYY年MM月DD hh:mm:ss") | mySlice }}
    </h4>

    <Test></Test>
  </div>
</template>
  
  <script>
// @ is an alias to /src
import Test from "../test/test1.vue";
import Day from "../../tools/day";

export default {
  name: "fillterFunc",
  data() {
    return {
      timeStr: 1621561377603,
    };
  },
  computed: {
    fmtTime() {
      return Day(this.timeStr).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  methods: {
    getfmtTime() {
      return Day(this.timeStr).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  // 局部过滤器
  filters: {
    timeFormatter(value, str = "YYYY-MM-DD hh:mm:ss") {
      // str 有值用  没值用默认的
      return Day(value).format(str);
    },
    mySlice(value) {
      return value.slice(0, 4);
    },
  },
  components: {
    Test,
  },
};
</script>
  
  <style scoped>
</style>